<template>
  <div>
    <div style="width: 100%;float:left;">
      <van-nav-bar
          title="忘记密码"
          left-arrow
          @click-left="onClickLeft"
      />
    </div>

    <div align="left" style="width: 100%;">
      <div class="login-container">
        <p style="width: 80%;">手机号:</p>
        <el-input v-model="form.phone" placeholder="请输入手机号" style="width: 80%;margin: 10px auto;"/>
      </div>
      <div class="login-container">
        <p style="width: 80%;">验证码:</p>
        <div style="width: 80%;">
          <el-input v-model="form.code" placeholder="请输入验证码" style="width: 60%;margin: 10px auto;"/>
          <el-button type="primary" @click="getCode" style="width: 40%;">获取验证码</el-button>
        </div>
      </div>
      <div class="login-container" style="margin-top: 20px">
        <el-button type="primary" @click="onSubmit" style="width: 80%;margin: 10px auto;">下一步</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "wangjimimaView",
  data() {
    return {
      form: {
        phone: '',
        code: ''
      }
    }
  },
  created() {
    this.form.phone = this.$route.query.phone;
  },
  methods: {
    onClickLeft() {
      this.$router.push({name: 'login2', query: {phone: this.form.phone}})
    },
    getCode() {
      if (this.form.phone == '') {
        this.$message.error("手机号不能为空");
        return;
      }
      var phone = this.form.phone;
      var reg = /^1[3-9]\d{9}$/;
      if (!reg.test(phone)) {
        this.$message.error("手机号格式不正确");
        return;
      }
      this.axios.get(`http://localhost:10086/api/user/user/getCode/` + this.form.phone).then(res => {
        console.log(res.data.message);
        if (res.data.code == 200) {
          this.$message.success("发送成功,验证码是：" + res.data.data)
        } else {
          console.log(res);
          this.$message.error(res.data.message);
        }
      })
    },
    onSubmit() {
      if (this.form.phone == '') {
        this.$message.error("手机号不能为空");
        return;
      }
      var phone = this.form.phone;
      var reg = /^1[3-9]\d{9}$/;
      if (!reg.test(phone)) {
        this.$message.error("手机号格式不正确");
        return;
      }
      if (this.form.code == '') {
        this.$message.error("验证码不能为空");
        return;
      }
      this.axios.get(`http://localhost:10086/api/user/user/toUpdatePassword/` + this.form.phone + "/" + this.form.code).then(res => {
        if (res.data.code == 200) {
          this.$message.success("验证成功")
          console.log(res.data.data)
          this.$router.push({name: 'updatePassword', query: {id: res.data.data}})
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
</style>